import { useEffect, useState, useRef, useMemo } from 'react'
import { message } from 'antd'
import { useSelector } from 'react-redux'
import dayjs from "dayjs";
import LdMainContainer from '../../components/LdMainContainer'
import Options from './Options'
import BarChart from './BarChart';
import LineChart from './LineChart';
import TaskChart from './TaskChart';
import NoData from '../../assets/state/noData.png'
import bus from '../../utils/eventBus';
import './index.scss'
const navListDefault = [
    {
        id: "print",
        title: "打印文件",
        value: 0,
        bg: require("../../assets/network/1.png"),
        mode: 1,
        unit: "页",
    },
    {
        id: "make",
        title: "刻录光盘",
        value: 0,
        bg: require("../../assets/network/3.png"),
        mode: 2,
        unit: "张",
    },
]
const State = () => {
    const { id = '' } = useSelector((state: any) => state.userReducer.userInfo)
    const { enableClone = true, enablePrint = true } = useSelector((state: any) => state.licenseInfoReducer.licenseInfo)
    const [barChartData, setBarChartData] = useState<any[]>([])
    const [lineChartData, setLineChartData] = useState<any[]>([])
    const [taskChartData, setTaskChartData] = useState<any[]>([])
    const params = useRef<{ year: string, month: string, type: number }>(
        {
            year: `${dayjs().year()}`,
            month: `${dayjs().month() + 1}`,
            type: 1,
        }
    )
    const navList = useMemo(() => {
        return !enableClone && !enablePrint ?
            []
            :
            !enableClone ?
                [...navListDefault].filter(item => item.mode === 1) : !enablePrint ?
                    [...navListDefault].filter(item => item.mode === 2) : [...navListDefault]
    }, [enableClone, enablePrint])
    const title = useMemo(() => {
        const data = navList.find((item) => item.mode === params.current.type)
        return data && data.title
    }, [params.current.type])
    const loadData = async () => {
        const data = {
            ...params.current,
            month: params.current.month.padStart(2, "0"),
            userId: id
        }
        window.chromePro.getPerStatDetail(
            JSON.stringify(data)
        );
    }
    const getPerStatDetailFinished = (res: any) => {
        if (res.code === 200) {
            setBarChartData(res.data.years);
            setLineChartData(res.data.mouths);
            setTaskChartData(res.data.dist);
            navList.forEach((item: any) => {
                if (item.mode === 1) {
                    item.value = res.data.printTotal;
                } else {
                    item.value = res.data.cloneTotal;
                }
            });
        } else {
            message.error(res.message || "获取数据失败!");
        }
    }
    const handleYearChange = (val: string) => {
        params.current = {
            ...params.current,
            year: val
        }
        loadData()
    }
    const handleMonthChange = (val: string) => {
        params.current = {
            ...params.current,
            month: val
        }
        loadData()
    }
    const handleChangeTab = (val: number) => {
        params.current = {
            ...params.current,
            type: val
        }
        loadData()
    }
    useEffect(() => {
        if (window.chromePro) {
            loadData();
        }
        bus.addListener("loaded", loadData);
        bus.addListener("getPerStatDetailFinished", getPerStatDetailFinished);
    }, [])
    useEffect(() => {
        return () => {
            bus.removeListener("getPerStatDetailFinished", getPerStatDetailFinished);
            bus.removeListener('loaded', loadData)
        }
    }, [])
    return (
        <LdMainContainer showMenu={false} background={'#eff6fd'}>
            <>
                <div className="header flex-start align-center mb-9">
                    <span className="title">统计分析</span>
                </div>
                <div className="w100 flex-start" style={{ height: 'calc(100% - 47px)' }}>
                    {
                        navList.length ?
                            <div className="left-container flex-start flex-1">
                                <Options navList={navList} handleChangeTab={handleChangeTab}></Options>
                                <div className="detail flex-1" style={{ marginRight: '10px' }}>
                                    <div className="chart-item" style={{ height: 'calc(50% - 5px)', background: 'white', marginBottom: '10px' }}>
                                        <BarChart type={params.current.type} data={barChartData} year={handleYearChange} title={title}></BarChart>
                                    </div>
                                    <div className="chart-item" style={{ height: 'calc(50% - 5px)', background: 'white' }}>
                                        <LineChart data={lineChartData} year={params.current.year} month={handleMonthChange} title={title}
                                            type={params.current.type}></LineChart>
                                    </div>
                                </div>
                            </div>
                            :
                            <div className="left-container flex-center mr-10 flex-1">
                                <div className="no-data">
                                    <img draggable={false} src={NoData} />
                                    <span>暂无数据</span>
                                </div>
                            </div>
                    }
                    <div className="right-container">
                        <TaskChart data={taskChartData}></TaskChart>
                    </div>
                </div>
            </>
        </LdMainContainer >
    )
}
export default State